/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header :title="base.title">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
      <!-- <div slot="right" style="width: 100%;height: 100%;text-align: center;">
        <i
          :class="['iconfont', 'icon-shoucang']"
          style="font-size: 22px;margin-right: 5px;"
          @click="collection"
        ></i>
      </div>-->
    </Header>
    <div class="main">
      <div class="video">
        <img v-if="!src_mp4" :src="base.litpic" alt="视频封面">
        <video
          class="video"
          ref="video"
          v-else
          :src="src_mp4"
          controls
          poster="base.litpic"
          autoplay="false"
        ></video>
      </div>
      <tab>
        <tab-item selected @on-item-click="onItemClick">课程目录</tab-item>
        <tab-item @on-item-click="onItemClick">教师介绍</tab-item>
      </tab>
      <div class="tab_content">
        <div class="content_2" v-if="tab_index === 0">
          <ul>
            <li class="list" v-for="(item, index) in items" :key="index" @click="play(item)">
              <div class="left">
                <i class="iconfont icon-play"></i>
                {{item.title}}
              </div>
              <div class="right" v-if="!base.viewAble && item.auditionAble">可试听>></div>
            </li>
          </ul>
        </div>
        <div class="content_3" v-if="tab_index === 1">
          <ul>
            <li v-for="(item,index) in teachers" :key="index">
              <div class="header">
                <img :src="item.portrait" alt="头像">
                {{item.name}}
              </div>
              <p>{{item.description}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import CollapseItem from "../../components/CollapseItem/CollapseItem";
import { Tab, TabItem } from "vux";
import {
  getKeChengDetail,
  reqCollection,
  reqSetRecord
} from "../../api/index.js";

export default {
  data() {
    return {
      base: {},
      items: [],
      teachers: [],
      tab_index: 0,
      src_mp4: "",
      curVideoInfo: {},
      setVideoTime: null
    };
  },
  watch: {
    src_mp4: function(data) {
      console.log("路径发生变化!!");
      if (data) {
        setTimeout(() => {
          this.$refs.video.src = data;
          this.addVideoListener();
        });
      }
    }
  },
  mounted() {
    let id = this.$router.history.current.query.id;
    this.getData(id);
  },
  methods: {
    //收藏课程
    async collection() {
      let result = await reqCollection({
        relid: this.$router.history.current.query.id,
        type: "COURSE"
      });
      if (result.code === 1) {
        this.$vux.toast.show(`收藏成功`);
      } else {
        this.$vux.toast.show(`收藏失败:${result.msg}`);
      }
    },
    async getData(data) {
      let result = await getKeChengDetail({ cid: data });
      if (result.code === 1) {
        this.base = result.data.base;
        this.items = result.data.items;
        this.teachers = result.data.teachers;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    onItemClick(index) {
      console.log("on item click:", index);
      this.tab_index = index;
    },
    play(data) {
      this.curVideoInfo = data;
      let viewAble = this.base.viewAble; //是否可以观看视频
      let auditionAble = data.viewAble; //是否可以试看视频
      if (viewAble) {
        this.src_mp4 = data.urls.primary;
      } else {
        if (auditionAble) {
          this.src_mp4 = data.urls.audition;
          return;
        } else {
          this.$vux.toast.show(`请先购买课程!`);
        }
      }
    },
    // 给video添加监听事件
    addVideoListener() {
      let self = this;
      let video = this.$refs.video;
      // 先清除定时器并清空所有绑定的事件
      clearInterval(self.setVideoTime);
      video.addEventListener("playing", () => {});
      video.addEventListener("timeupdate", () => {});
      video.addEventListener("pause", () => {});
      video.addEventListener("ended", () => {});
      self.setRecord();
      // 开始播放
      video.addEventListener("playing", () => {
        setTimeout(function() {
          self.setRecord();
        }, 1000 * 60 * 5);
      });
      video.addEventListener("timeupdate", () => {
        console.log("时间开始播放!");
      });
      // 播放暂停时
      video.addEventListener("pause", function() {
        self.setRecord();
      });
      // 播放结束时
      video.addEventListener("ended", function() {
        self.setRecord();
      });
    },
    // 设置video的进度
    async setRecord() {
      let result = await reqSetRecord({
        courseId: this.base.id,
        videoId: this.curVideoInfo.id,
        seconds: this.$refs.video.duration,
        completed: 0
      });
      if (result.code === 1) {
        console.log("设置进度成功!");
      } else {
        console.log("设置进度失败!");
      }
    }
  },
  components: {
    Header,
    Tab,
    TabItem,
    CollapseItem
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
  .video {
    width: 100%;
    height: 180px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .main {
    width: 100%;
    height: calc(~"100% - 226px");
    position: relative;
    overflow: auto;
  }
  .tab_content {
    width: 100%;
    height: calc(~"100% - 44px");
    .content_1,
    .content_2,
    .content_3 {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
}

// 教师
.content_3 {
  ul {
    li {
      background: #fff;
      padding: 15px;
      border-bottom: 1px solid @border-base;
      .header {
        .mix-flex-center();
        justify-content: flex-start;
        height: 50px;
        img {
          height: 35px;
          width: 35px;
          border-radius: 35px;
          margin-right: 10px;
        }
      }
      p {
        color: @font-secondary;
      }
    }
  }
}
// 购买
.buy_box {
  position: fixed;
  height: 50px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  .mix-flex-center();
  .zixun_box {
    flex: 3;
    .mix-flex-center();
    color: @red;
    img {
      width: 26px;
      height: 26px;
    }
  }
  .buy {
    height: 100%;
    flex: 7;
    .mix-flex-center();
    font-size: 16px;
    color: @white;
    background: @red;
    b {
      padding: 0 6px;
    }
  }
}

.list {
  .mix-flex-center();
  padding: 10px;
  background: @white;
  border: 1px solid @border-base;
  .left {
    flex: 1;
    i {
      padding: 0 6px;
      color: @font-secondary;
    }
  }
  .right {
    width: 40px;
    text-align: right;
    font-size: 12px;
    color: @red;
  }
}

.video {
  // .be-full();
}
</style>
